<template>
    <div>
        <app-head></app-head>
        <app-body>

            <div>
                <el-carousel :interval="2000" height="20rem" @change="changeImg" indicator-position="outside">
                    <el-carousel-item v-for="(item, index) in images" :key="index">
                        <el-image :class="className" style="width:1920" :src="item.idView"
                            fit="fit"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </div>

            <txt style="font-size: 30px;">保险介绍</txt>
            <br>
            <txt style="color: orangered;font-size: 20px;">insurance introduce</txt>
            <br>
            <br>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-size: 20px; color:#606266;"><i class="el-icon-info"></i>机动车辆损失险</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="menu(1)">购买
                                >></el-button>
                        </div>
                        <i class="el-icon-s-promotion"></i>发生保险事故时，补偿您自己车辆的损失。
                        <br>
                        <br>
                        <br>
                        <i class="el-icon-s-promotion"></i>新手上路，容易发生交通意外，强烈建议购买。
                        <br>
                        <br>
                        <br>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-size: 20px; color:#606266;"><i class="el-icon-info"></i>第三者责任险</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="menu(1)">购买
                                >></el-button>
                        </div>
                        <i class="el-icon-s-promotion"></i>发生保险事故，我们可以按条款代您对第三方（人或物）受到的损失进行赔偿。
                        <br>
                        <br>
                        <i class="el-icon-s-promotion"></i>不幸撞到豪车或致人重伤，赔偿可能高达上百万，投保第三者责任险，保险公司可赔付交强险不足的部分。
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-size: 20px; color:#606266;"><i class="el-icon-info"></i>车上人员责任险</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="menu(1)">购买
                                >></el-button>
                        </div>
                        <i class="el-icon-s-promotion"></i>发生意外事故，造成本车驾驶员本人的人身伤亡，如果本车负有责任，保险公司将按条款规定赔偿。
                        <br>
                        <br>
                        <i class="el-icon-s-promotion"></i>新手或经常开车的人，为更好的保障自身安全，建议购买。
                        <br>
                        <br>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-size: 20px; color:#606266;"><i class="el-icon-info"></i>车身划痕损失险</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="menu(1)">购买
                                >></el-button>
                        </div>
                        <i class="el-icon-s-promotion"></i>无明显碰撞痕迹的车身划痕损失，保险公司将按照条款规定赔偿
                        <br>
                        <br>
                        <i class="el-icon-s-promotion"></i>新车或新手，建议购买。
                        <br>
                        <br> <br>

                    </el-card>
                </el-col>
            </el-row>
            <br> <br> <br>
            <img src="../../assets/lc.png" width="100%" alt="Image">

            <br> <br> <br> <br>

        </app-body>
    </div>
</template>

<script>
import AppHead from '../common/AppHeader.vue';
import AppBody from '../common/AppPageBody.vue'
import AppFoot from '../common/AppFoot.vue'

export default {
    name: "index",
    components: {
        AppHead,
        AppBody,
        AppFoot
    },
    data() {
        return {

            images: [
                { id: 0, idView: require('../../assets/homeImages/1.png') },
                { id: 1, idView: require('../../assets/homeImages/2.png') }
            ],
            className: "",

            labelName: '0',
            idleList: [],
            currentPage: 1,
            totalItem: 1
        };
    },
    created() {
        this.findIdleTiem(1)
    },
    watch: {
        $route(to, from) {
            this.labelName = to.query.labelName;
            let val = parseInt(to.query.page) ? parseInt(to.query.page) : 1;
            // let totalPage=parseInt(this.totalItem/8)+1;
            // val=parseInt(val%totalPage);
            // val=val===0?totalPage:val;
            this.currentPage = parseInt(to.query.page) ? parseInt(to.query.page) : 1;
            this.findIdleTiem(val);
        }
    },
    mounted() {
        this.className = "lun-img-two";
        setTimeout(() => {
            this.className = "lun-img";
        }, 300);
    },

    methods: {
        // 点击菜单
        menu(value) {
            this.$router.push({ path: '/bx' });
        },


        changeImg: function (e) {
            this.className = "lun-img-two";
            setTimeout(() => {
                this.className = "lun-img";
            }, 300);
        },

        findIdleTiem(page) {
            const loading = this.$loading({
                lock: true,
                text: '加载数据中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0)'
            });
            if (this.labelName > 0) {
                this.$api.findIdleTiemByLable({
                    idleLabel: this.labelName,
                    page: page,
                    nums: 8
                }).then(res => {
                    console.log(res);
                    let list = res.data.list;
                    for (let i = 0; i < list.length; i++) {
                        list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
                        let pictureList = JSON.parse(list[i].pictureList);
                        list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
                    }
                    this.idleList = list;
                    this.totalItem = res.data.count;
                    console.log(this.totalItem);
                }).catch(e => {
                    console.log(e)
                }).finally(() => {
                    loading.close();
                })
            } else {
                this.$api.findIdleTiem({
                    page: page,
                    nums: 8
                }).then(res => {
                    console.log(res);
                    let list = res.data.list;
                    for (let i = 0; i < list.length; i++) {
                        list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
                        let pictureList = JSON.parse(list[i].pictureList);
                        list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
                    }
                    this.idleList = list;
                    this.totalItem = res.data.count;
                    console.log(this.totalItem);
                }).catch(e => {
                    console.log(e)
                }).finally(() => {
                    loading.close();
                })
            }
        },
        handleClick(tab, event) {
            // console.log(tab,event);
            console.log(this.labelName);
            this.$router.replace({ query: { page: 1, labelName: this.labelName } });
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.$router.replace({ query: { page: val, labelName: this.labelName } });
        },
        toDetails(idle) {
            this.$router.push({ path: '/details', query: { id: idle.id } });
        }
    }
}
</script>

<style scoped>
.idle-card {
    height: 300px;
    border: #eeeeee solid 1px;
    margin-bottom: 15px;
    cursor: pointer;
}

.fenye {
    display: flex;
    justify-content: center;
    height: 60px;
    align-items: center;
}

.idle-title {
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 10px;
}

.idle-prive {
    font-size: 16px;
    color: red;
}

.idle-place {
    font-size: 13px;
    color: #666666;
    float: right;
    padding-right: 20px;

}

.idle-time {
    color: #666666;
    font-size: 12px;
    margin: 0 10px;
}

.user-nickname {
    color: #999999;
    font-size: 12px;
    display: flex;
    align-items: center;
    height: 30px;
    padding-left: 10px;
}

.user-info {
    margin-top: 10px;
    float: right;
    padding: 5px 10px;
    height: 30px;
    display: flex;
}
</style>